<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>房屋管理</a>
    <a><cite>备注模板</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-input-inline layui-show-xs-block">
            <select name="property" lay-filter="select">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" > 
      <button class = "layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon"></i>新增</button>
  </div > 
</script>

<script>
  layui.use(['table', 'form'],
    function () {
      var table = layui.table;
      var form = layui.form;

      // 首次加载
      table.render({
        elem: '#dataGrid'
        , height: 'full'
        , url: './query.html' //数据接口
        , toolbar: '#toolbarDemo'
        , defaultToolbar: []
        , cols: [[ //表头
          { field: 'id', title: 'ID', hide: true }
          , { field: 'property_name', title: '房产', width: '15%' }
          , { field: 'note', title: '备注', width: '60%' }
          , { field: 'right', title: '操作', toolbar: '#barDemo', width: '25%' }
        ]]
      });

      //表头工具栏事件
      table.on('toolbar(grid)', function (obj) {
        switch (obj.event) {
          case 'add':
            var formData = form.val("formData");
            xadmin.open('新增备注', 'edit.html?house_property_id=' + formData.property, '', '', true);
            break;
        };
      });

      // 编辑、删除事件
      //监听行工具条
      table.on('tool(grid)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        switch (layEvent) {
          case 'edit':// 编辑
            xadmin.open('编辑备注', 'edit.html?id=' + data.id, '', '', true);
            break;
          case 'del':// 删除
            layer.confirm('确认要删除吗？', function () {
              main.ajaxPost(
                {
                  url: "{:url('delete')}",
                  data: { "id": data.id },
                },
                function (data) {
                  table.reload('dataGrid'); //只重载数据
                }
              )
            });
            break;
        };
      });

      // 查询重新加载
      form.on('select(select)', function (data) {
        table.reload('dataGrid', {
          url: './query.html',
          where: { //设定异步数据接口的额外参数，任意设
            house_property_id: data.value
          },
        }); //只重载数据
      });
    });
</script>